<template>
  <div class="paySuccess" >
    <div class="states" v-show="info.pay_style == 'COD'">
      <p>
        <span class="iconfont icon-chenggong"></span>
        下单成功
      </p>
      <p>您的包裹正在快马加鞭的去找你</p>
    </div>
    <div class="states" v-show="info.pay_style !== 'COD' ? info.pay_status == 2 : false">
      <p>
        <span class="iconfont icon-chenggong"></span>
        付款成功
      </p>
      <p>您的包裹正在快马加鞭的去找你</p>
    </div>
    <div class="states faild" v-show="info.pay_style !== 'COD' ? info.pay_status == 1 : false">
      <p>
        <span class="iconfont icon-shibai"></span>
        付款失败
      </p>
      <p>出了点意外，您可以尝试重新购买</p>
    </div>
    <div class="receiveInfo">
      <div>
        <span><label>收货人：</label>{{ info.nickname }}</span>
        <span><label>联系电话：</label>{{ info.tel }}</span>
      </div>
      <p>
        <label>收货地址：</label>{{ info.province +  info.city + info.area + ' ' + info.address}}
      </p>
    </div>
    <div class="orderInfo">
      <p><label>订单编号：</label>{{ order_no }}</p>
      <p ><label>商品：</label>{{ info.package_name }}</p>
      <p ><label>数量：</label>{{ info.num }}件</p>
      <p style="color:#C03030;"><label>合计：</label>￥{{ info.price * info.num }}</p>
      <p v-show="info.user_note.length == 0 ? false : true"><label>留言：</label>{{ info.user_note }}</p>
    </div>
    <div class="btns">
      <div>
        <input type="button" value="查看订单" @click="lookOrder">
      </div>
      <div>
        <input type="button" value="继续购物" @click="backIndex">
      </div>
    </div>
    <!-- <un-pay-handle v-show="info.pay_status == 1" :time="info.time" :orderNo="order_no" :itemInfo="info"/> -->
    <div class="paybtns" v-show="info.pay_status == 1 && info.pay_style === 'wx_jsapi'">
      <input type="button" value="继续付款" @click="pay">
      <!-- <input type="button" value="取消订单"> -->
    </div>
    <shade v-show="loadShow"/>
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
import { getOrderInfo, OrderPay_wxh5 } from "@/api/index";
import configWxPayApi from "@/utils/configWxPayApi.js";
import payByWx from "@/utils/payByWx.js";
export default {
  data() {
    return {
      order_no: this.$route.params.order_no,
      loadShow: true,
      info: {}
    };
  },
  created() {
    getOrderInfo(this.order_no).then(result => {
      this.loadShow = false;
      this.info = result.data;
      // info.pay_style == 'COD'
      if (this.info.pay_style === "COD") {
        this.$store.commit("SETPAGEINFO", {
          title: "下单成功",
          description: ""
        });
      } else {
        if (result.data.pay_status == 2) {
          this.$store.commit("SETPAGEINFO", {
            title: "付款成功",
            description: ""
          });
        } else {
          this.$store.commit("SETPAGEINFO", {
            title: "付款失败",
            description: ""
          });
        }
      }
    });
  },
  methods: {
    pay() {
      if (this.$store.state.loginType == "h5") {
        OrderPay_wxh5(this.order_no).then(results => {
          const rdirectUrl =
            "http://www.chamiw.com/App/dist/#/paySuccess/" + this.order_no;
          location.href =
            decodeURIComponent(results.data.mweb_url) +
            "&redirect_url=" +
            encodeURIComponent(rdirectUrl);
        });
      } else {
        payByWx(
          this.order_no,
          this.$store.state.openid,
          this.info,
          this.info.totalPrice,
          this
        );
      }
    },
    lookOrder() {
      this.info.root_menu_id = this.$store.state.root_menu_id
      this.$router.push({
        name: "订单详情",
        params: {
          info: this.info
        }
      });
    },
    backIndex() {
      const good_id = this.$store.state.urlParams.good_id;
      const username = this.$store.state.urlParams.username;
      const platform = this.$store.state.urlParams.platform;
      location.href = `http://www.chamiw.com/App/mid-autumn/#/mid-autumn?good_id=${good_id}&username=${username}&platform=${platform}`;
    }
  }
};
</script>

<style lang="scss" scoped>
// -webkit-appearance:none;
@import "@/style/base.scss";
.paySuccess {
  width: 100%;
  height: 100%;
  background-color: #fff;
  font-size: to(25);
  // background-color: #fff;
  .states {
    width: 100%;
    height: to(136);
    background: -webkit-linear-gradient(left, #ffc075, #ffb55e);
    color: white;
    padding-left: to(51);
    padding-top: to(13);
    position: relative;
    &.faild {
      background: -webkit-linear-gradient(left, #ff5e5e, #fc5050);
      .iconfont {
        font-size: to(65);
        font-weight: lighter;
      }
    }
    p {
      &:nth-child(1) {
        padding-left: to(80);
      }
      span {
        font-size: to(60);
        font-weight: lighter;
        width: to(59);
        height: to(59);
        display: inline-block;
        // border: to(3) solid #fff;
        // border-radius: 50%;
        text-align: center;
        line-height: to(59);
        position: absolute;
        left: 7%;
        top: 50%;
        transform: translateY(-50%);
      }
      &:nth-child(1) {
        font-size: to(40);
        line-height: to(59);
      }
      &:nth-child(2) {
        font-size: to(23);
        line-height: to(50);
        margin-left: to(81);
      }
    }
  }
  .receiveInfo {
    padding: to(19);
    background-color: #fff;
    margin-bottom: to(15);
    label {
      color: #7c7c7c;
    }
    div {
      display: flex;
      display: -webkit-flex;
      height: to(60);
      span {
        flex: 1;
      }
    }
  }
  .orderInfo {
    background-color: #fff;
    padding: to(20) to(18);
    p {
      line-height: to(55);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    label {
      color: #7c7c7c;
    }
  }
  .btns {
    display: flex;
    display: -webkit-flex;
    padding: to(80) 0;
    div {
      flex: 1;
      padding: 0 to(17);
      input {
        -webkit-appearance: none;
        width: 100%;
        background-color: #fff;
        outline: none;
        border: 1px solid #cccccc;
        height: to(51);
        border-radius: to(5);
        font-size: to(25);
        padding: to(38) 0;
        line-height: to(0);
        color: #000000;
      }
    }
  }
  .paybtns {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: to(15) 0;
    input {
      -webkit-appearance: none;
      float: right;
      background-color: #c03030;
      border: 0;
      width: to(150);
      line-height: to(61);
      color: white;
      font-size: to(30);
      border-radius: to(5);
      margin-right: to(20);
    }
  }
}
</style>
